<template>
<h2>借款项目列表显示</h2>

借款项目名称
<input type="text" v-model="Chaxun.BooroName" />
借款利息

<input type="text" v-model="Chaxun.Interes" />
<input type="button" value="查询" @click="show" />
<input type="button" value="升序" @click="Sheng" />
<input type="button" value="降序" @click="Jiang" />
<table class="table table-bordered" border="1">
    <thead>
    <tr>
        <th>借款编号</th>
        <th>借款姓名名称</th>
        <th>最高借款金额</th>
        <th>借款年限</th>
        <th>借款利息</th>
        <th>借款发布时间</th>
        <th>借款人数</th>
        <th>操作</th>
    </tr>
</thead>
<tbody>
    <tr v-for="item in Info" >
        <td>{{ item.BooroId }}</td>
        <td>{{ item.BooroName }}</td>
        <td>{{ item.BooroMoney }}</td>
        <td>{{ item.BooroYaer }}年</td>
        <td>{{item.Interes}}%</td>
        <td>{{ item.BooDate.substring(0,10) }}</td>
        <td>{{ item.BoorowNum }}</td>
        <td>
        <input type="button" value="申请借款" @click="Chakan(item.BooroId)" />
        <input type="button" value="删除" @click="DeleteS" />
        </td>
    </tr>
</tbody>
</table>
<span>
    当前为{{ page.totalCount }}条数据，每页显示{{ page.PageSize }}条数据，共{{ page.pageCount }}页，
    当前为第{{ page.PageIndex }}/{{page.pageCount}}页
</span>
<span>
    <a href="#" @click="pageTz(1)" style="margin-left: 5px;">首页</a>
    <a href="#" @click="pageTz(page.PageIndex-1)" style="margin-left: 5px;">上一页</a>
    <a href="#" @click="pageTz(page.PageIndex+1)" style="margin-left: 5px;">下一页</a>
    <a href="#" @click="pageTz(page.pageCount)" style="margin-left: 5px;">尾页</a>
</span>
</template>


<script setup lang="ts">
import { ref ,onMounted} from 'vue' 
import axios from 'axios';
import { useRouter} from 'vue-router';

const router = useRouter(); 

//创建响应式数据
const Info = ref([{
    BooroId:0,
    BooroName:'',
    BooroMoney:0,
    BooroYaer:0,
    InterId:0,
    BooroInfo:'',
    BooDate:'',
    BoorowNum:0,
    BoorowBool:'',
    Interes:''
}])
//创建查询响应式数据
const Chaxun = ref ({
    BooroName:'',
    Interes:''
})
//创建分页响应式数据
const page = ({
    PageIndex:1,
    PageSize:2,
    totalCount:0,
    pageCount:0

})
//创建生命周期函数
onMounted(()=>{
    show();
})
const show = ()=>{
    axios.get("http://localhost:61413/api/Boorows/ShowBoorows",{
        params:{
            BooroName:Chaxun.value.BooroName,
            Interes:Chaxun.value.Interes,
            pageSize:page.PageSize,
            pageindex:page.PageIndex
        }
    })
    .then(res=>{
        Info.value = res.data.Res
        page.totalCount = res.data.totalCount;
        page.pageCount = res.data.pageCount;
    })
    .catch(err=>{
        console.log(err);
    })
}
const Sheng = () =>{
    axios.get("http://localhost:61413/api/Boorows/ShowBoorowsPaixu",{
        params:{
            BooroName:Chaxun.value.BooroName,
            Interes:Chaxun.value.Interes
        }
    })
    .then(res=>{
        Info.value = res.data
    })
    .catch(err=>{
        console.log(err);
    })
}
const Jiang = () =>{
    axios.get("http://localhost:61413/api/Boorows/ShowBoorowsJiang",{
        params:{
            BooroName:Chaxun.value.BooroName,
            Interes:Chaxun.value.Interes
        }
    })
    .then(res=>{
        Info.value = res.data
    })
    .catch(err=>{
        console.log(err);
    })
}
//创建分页功能
const pageTz = (i:number)=>{
    if(i>=1 && i<=page.pageCount){
        page.PageIndex = i;
        show();
    }else{
        alert("页面显示错误!")
    }

} 
//申请借款
const Chakan = (BooroId:number) =>{
    router.push({
        name:'BackBoorow',
        params:{
            BooroId:BooroId,
        }
    })
}
const DeleteS = () =>{
    alert("借款信息已经有人借过款不能删除!")
}
</script>